<template>
	<view>

		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 导航栏 -->
		<view class="goods-header" :class="{'fixed': fixedBar}">
			<view class="wrap">
				<view class="goods-name">{{details.name}}</view>
				<view class="navs-bar">
					<block v-for="(item, index) in navs" :key="index">
						<view :class="['item', {'active': index == navIndex}]" @click="switchNav(index)">{{item}}</view>
						<view v-if="index < navs.length - 1" class="separator">|</view>
					</block>
					<view v-if="navIndex != 3" class="btn-primary" @click="switchNav(3)">立即购买</view>
				</view>
			</view>
		</view>

		<!-- 概述 -->
		<view v-if="navIndex == 0" class="goods-sketch" v-html="details.sketch"></view>
		<!-- 参数 -->
		<view v-else-if="navIndex == 1" class="goods-specs">
			<view class="wrap" v-html="details.specs"></view>
		</view>
		<!-- 评论 -->
		<comment v-else-if="navIndex == 2" :goodsId="details.id"></comment>
		<!-- 规格 -->
		<sku v-else-if="navIndex == 3" :goodsId="details.id"></sku>

		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import comment from '@/components/goods/comment.vue';
	import sku from '@/components/goods/sku.vue';

	import details from '@/common/config/goods/detail.config.js';
	import LazyLoad from '@/common/tools/lazyload.js';

	export default {
		components: {
			comment,
			sku
		},
		data() {
			return {
				details,
				navs: ['概述', '参数', '用户评价'],
				navIndex: 0,
				fixedBar: false
			}
		},
		onReady() {
			// 修改网站标题
			uni.setNavigationBarTitle({
				title: `${details.name} - 掌沃商城`
			});
			// 开启懒加载
			new LazyLoad('img');
		},
		onPageScroll(e) {
			this.fixedBar = e.scrollTop > 120;
		},
		methods: {
			switchNav(index) {
				if (index != this.navIndex) {
					this.navIndex = index;

					uni.pageScrollTo({
						duration: 0,
						scrollTop: 0
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods-header {
		position: relative;
		background-color: $bg-color;
		border-top: 1px solid $border-color;
		border-bottom: 1px solid $border-color;
		box-shadow: 0 5px 5px rgba(0, 0, 0, .07);
		z-index: 1;

		&.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		.wrap {
			width: 1226px;
			margin: 0 auto;
			@extend %flex-align-center;
			justify-content: space-between;

			.goods-name {
				font-size: 18px;
				font-weight: 400;
				line-height: 60px;
				color: #424242;
			}

			.navs-bar {
				@extend %flex-align-center;
				font-size: 14px;

				.item {
					cursor: pointer;
					color: #616161;
					transition: color .2s;

					&.active,
					&:hover {
						color: $color-primary;
					}

					&.active {
						cursor: default;
					}
				}

				.separator {
					color: #e0e0e0;
					margin: 0 .5em;
				}

				.btn-primary {
					color: #fff;
					margin-left: 10px;
					background-color: $color-primary;
					width: 120px;
					height: 30px;
					font-size: 12px;
					line-height: 30px;
					cursor: pointer;
					text-align: center;
					transition: all .3s;

					&:hover {
						opacity: .8;
					}
				}
			}
		}
	}

	.goods-sketch {

		/deep/ img {
			margin-top: -5px;
		}
	}

	.goods-specs {
		background-color: $bg-color-grey;

		.wrap {
			width: 1226px;
			margin: 0 auto;
			padding: 30px 0;
			
			/deep/ * {
				line-height: 2;
			}
		}
	}
</style>
